<template>
	<view class="g-main">
		<view class="u-list f-bc-whilte f-mb7">
			<view class="f-p15">
				<view class="key required">订单类型</view>
				<radio-group @change="changeCollectionHandler" class="f-frowceny f-mlauto f-fz14 f-mt20">
					<label class="f-frowceny f-mr18">
						<radio :value="1" color="#FF1E12" />
						<text style="color: #666666;">自营车订单</text>
					</label>
					<label class="f-frowceny">
						<radio :value="2" color="#FF1E12" />
						<text style="color: #666666;">零售车订单</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item empty border-bottom sm-border">
				<text class="key required">订单日期</text>
				<text class="value">{{ Date.now() | formatTime }}</text>
			</view>
			<view class="u-item arrow border-bottom sm-border">
				<text class="key required">请款日期</text>
				<text class="value" :class="{ ph: !dataForm.time }">{{ dataForm.time || '请选择交车日期' }}</text>
			</view>
			<view class="u-item arrow border-bottom sm-border" @tap="toPage('/pages/addBill/addBill')">
				<text class="key">发票</text>
				<text class="value" :class="{ ph: !dataForm.bill_type }">{{ dataForm.bill_type || '请选择发票类型' }}</text>
			</view>
			<view class="u-item price border-bottom sm-border">
				<text class="key">发票金额</text>
				<text class="value" :class="{ ph: !dataForm.bill_money }">{{ dataForm.bill_money || '请填写发票金额' }}</text>
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item border-bottom sm-border">
				<text class="key f-fw650">客户信息</text>
			</view>
			<view class="u-item arrow border-bottom sm-border">
				<text class="key required">客户名称</text>
				<input type="text" v-model="dataForm.user_name" placeholder="请选择客户名称" class="value" placeholder-class="ph" >
			</view>
			<view class="u-item arrow border-bottom sm-border">
				<text class="key">联系人</text>
				<text class="value" :class="{ ph: !dataForm.user_contact }">{{ dataForm.user_contact || '请填写联系人' }}</text>
			</view>
			<view class="u-item empty border-bottom sm-border">
				<text class="key">联系电话</text>
				<text class="value" :class="{ ph: !dataForm.user_phone }">{{ dataForm.user_phone || '请填写联系电话' }}</text>
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item border-bottom sm-border">
				<text class="key f-fw650">付款凭证</text>
			</view>
			<view class="f-frowspcen f-fwrap f-p15">
				<view class="u-upload-item">
					<text class="u-add-icon yellow"></text>
					<text>上传凭证</text>
				</view>
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item border-bottom sm-border">
				<text class="key f-fw650">用户信息</text>
			</view>
			<view class="u-item arrow border-bottom sm-border">
				<text class="key">姓名</text>
				<input type="text" value="" placeholder="请输入销售姓名" class="value" placeholder-class="ph" />
			</view>
			<view class="u-item empty border-bottom sm-border">
				<text class="key">身份证号码</text>
				<input type="idcard" value="" placeholder="请输入身份证号码" class="value" placeholder-class="ph" />
			</view>
			<view class="f-frowspcen f-fwrap f-p15">
				<view class="u-upload-item id-card">
					<text class="u-add-icon yellow"></text>
					<text>上传身份证正面</text>
				</view>
				<view class="u-upload-item id-card">
					<text class="u-add-icon yellow"></text>
					<text>上传身份证反面</text>
				</view>
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item arrow border-bottom sm-border">
				<text class="key">车型名称</text>
				<text class="value" :class="{ ph: !dataForm.car_type }">{{ dataForm.car_type || '请选择车型名称' }}</text>
			</view>
			<view class="u-item price border-bottom sm-border">
				<text class="key">指导价</text>
				<text class="value" :class="{ ph: !dataForm.car_money }">{{ dataForm.car_money || '' }}</text>
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item border-bottom sm-border">
				<text class="key f-fw650">车辆信息</text>
			</view>
			<picker mode="selector" :range="outColorList" data-key="out_color" data-list="outColorList" @change="changeHandler">
				<view class="u-item arrow border-bottom sm-border">
					<text class="key required">外饰信息</text>
					<text class="value" :class="{ ph: !dataForm.out_color }">{{ dataForm.out_color || '请填写外饰颜色' }}</text>
				</view>
			</picker>
			<picker mode="selector" :range="intColorList" data-key="int_color" data-list="intColorList" @change="changeHandler">
				<view class="u-item arrow border-bottom sm-border">
					<text class="key required">内饰信息</text>
					<text class="value" :class="{ ph: !dataForm.int_color }">{{ dataForm.int_color || '请填写内饰颜色' }}</text>
				</view>
			</picker>
			<view class="u-item a border-bottom sm-border">
				<text class="key">台数</text>
				<text class="value" :class="{ ph: !dataForm.car_num }">{{ dataForm.car_num || '请选择车型名称' }}</text>
			</view>
			<view class="u-item price border-bottom sm-border">
				<text class="key">优惠金额</text>
				<text class="value" :class="{ ph: !dataForm.discount_num }">{{ dataForm.discount_num || '请填写优惠金额' }}</text>
			</view>
			<view class="u-item price">
				<text class="key">销售金额</text>
				<text class="value" :class="{ ph: !dataForm.sale_num }">{{ dataForm.sale_num || '请填写销售金额' }}</text>
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item border-bottom sm-border">
				<text class="u-add-icon red f-mr15"></text>
				<text class="key">添加车辆信息</text>
			</view>
			<view class="u-item price">
				<text class="key required">订单总金额</text>
				<input type="text" v-model="dataForm.acount" maxlength="10" placeholder="请填写订单总金额" class="value" placeholder-class="ph" />
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-textarea">
				<view class="key">备注</view>
				<u-textarea v-model="dataForm.remark" :maxlength="100" :placeholder="'请填写备注'"></u-textarea>
			</view>
		</view>
		<view class="u-submit-btn-view"><button class="u-btn-primary f-fz16 f-fc-whilte">提 交</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataForm: {
				time: '',	// 交车时间
				bill_type: '',	// 发票类型
				bill_money: '',	// 发票金额
				user_name: '',	// 客户名称
				user_contact: '',	// 联系人
				user_phone: '',		// 联系电话
				car_type: '',	// 车型名称
				car_money: '',	// 指导价
				out_color: '',	// 外饰颜色
				int_color: '',	// 内饰颜色
				car_num: '',	// 台数
				discount_num: '',	// 优惠金额
				sale_num: '',	// 销售金额
				acount: '',		// 总金额
				remark: ''		// 备注
			},
			outColorList: ['颜色1', '颜色2'],
			intColorList: ['颜色1', '颜色2']
		};
	},
	methods: {
		changeCollectionHandler(event) {
			const that = this;
			console.log(event);
		},
		/**
		 * changeHandler
		 * */

		changeHandler(event) {
			const that = this;
			let key = event.target.dataset.key;
			let list = event.target.dataset.list;
			that.dataForm[key] = that[list][event.detail.value];
		}
	}
};
</script>

<style lang="scss" scoped>
.u-pay-upload-item {
	width: 144rpx;
	height: 144rpx;
	padding-top: 33rpx;
	border-radius: 14rpx;
	border: 2rpx dashed $uni-text-color-grey;
}
.u-submit-btn-view {
	padding: 60rpx 100rpx 100rpx;
	.u-submit-btn {
		margin-top: 80rpx;
	}
}
</style>
